<template>
  <div>
    <el-card style="margin-bottom: 50px">
      <el-form :model="formData" label-width="100px" :inline="true">
        <el-form-item label="名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formData.type">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <pure-table
        :data="tableData"
        :columns="columns"
        row-key="id"
        stripe
        :header-cell-style="{
          background: '#eff2fb',
          color: 'var(--el-text-color-primary)'
        }"
        style="margin-top: 30px"
      >
        <template #name="{ row }">
          <el-button text type="primary" size="small">{{ row.name }}</el-button>
        </template>
        <template #operation="{ row }">
          <el-button text type="primary" size="small">催办</el-button>
        </template>
      </pure-table>
      <el-pagination
        class="pagination"
        :current-page="listPageObj.currentPage"
        :page-size="listPageObj.pageSize"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listPageObj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

interface Table {
  id: number;
  name: string;
  type: string;
  founder: string;
  createdTime: string;
}

const formData = reactive({
  name: "",
  type: ""
});

const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const options = [
  {
    value: "1",
    label: "表单"
  },
  {
    value: "2",
    label: "新闻"
  },
  {
    value: "3",
    label: "会议"
  }
];
const tableData: Table[] = [
  {
    id: 1,
    name: "公司1",
    type: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    founder: "阿海",
    createdTime: "2023-03-30"
  },
  {
    id: 1,
    name: "公司2",
    type: "yyy",
    founder: "阿海",
    createdTime: "2023-05-08"
  }
];
const columns: TableColumnList = [
  {
    label: "公司",
    prop: "name",
    slot: "name"
  },
  {
    label: "类型",
    prop: "type"
  },
  {
    label: "创建人",
    prop: "founder"
  },
  {
    label: "结束时间",
    prop: "createdTime"
  },
  {
    label: "操作",
    fixed: "right",
    slot: "operation"
  }
];

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
